<script setup>
import { exportWordImage, getWordImage } from "@/utils/exportFile";
import { ref } from "vue";

const dialogVisible = ref(false);
const startSchemeTemplate = ref({
  name: "启动方案名称",
  time: "2023-12-12",
  scope: `1．XXXX所有一、二次设备 
          2．XXXX主变、XXXX主变（XX管辖）`,
  projectAdjuster: `1．XXXX,XXXX主变冲击五次、核相。
                    2．XXXXX设备冲击一次，XXXXXXX二次定相。
                    3．XXXXXX,XXXX差动保护带负荷试验。（XX管辖）
                    4．XXXXXX备自投实跳试验。`,
  condition: `1．XXX启动范围内的所有一、二次设备施工结束，验收合格，监控信息与相应调控人员核对完备，设备可以带电，站内一次设备相位正确。
              2．XXX待用XXXXXX、待用XXXXXX、待用XXXXXX、待用XXXXXX、待用XXXXXX、待用XXXXXX、待用XXXXXX、银标XXXXXX、银阳XXXXXX、银区XXXXXX、待用XXXXXX、待用XXXXXX、待用XXXXXX、XXXXXX开关保护按定值单整定并投入。
              3．启动范围内所有设备均为冷备用状态。`,

  stepAdjuster: `1.XXXXXX冲击一次、定相。
                  2.XXXXXX一次设备冲击（见附图2）`,
  imgPath: "https://docxtemplater.com/puffin.png",
  tableData: []
});
const imgSize = ref({
  imgPath: [150, 150],
  imgPath1: [550, 250],
});

const tableData = ref([
  { order: 0, col1: "合计", col: 6266, col3: 23, col5: 2 },
  { order: 1, col1: "徐州", col: 706, col3: 1, col5: 0 },
  { order: 2, col1: "苏州", col: 668, col3: 2, col5: 0 },
  { order: 3, col1: "盐城", col: 624, col3: 2, col5: 0 },
  { order: 4, col1: "南通", col: 518, col3: 0, col5: 0 },
  { order: 5, col1: "连云港", col: 498, col3: 3, col5: 0 },
  { order: 6, col1: "淮安", col: 490, col3: 3, col5: 1 },
  { order: 7, col1: "常州", col: 458, col3: 1, col5: 0 },
  { order: 8, col1: "泰州", col: 454, col3: 1, col5: 0 },
  { order: 9, col1: "无锡", col: 433, col3: 2, col5: 0 },
  { order: 10, col1: "南京", col: 400, col3: 2, col5: 1 },
  { order: 11, col1: "扬州", col: 383, col3: 3, col5: 0 },
  { order: 12, col1: "宿迁", col: 363, col3: 1, col5: 0 },
  { order: 13, col1: "镇江", col: 271, col3: 2, col5: 0 },
]);

const htmlTitle = ref("启动方案");

const downLoad = () => {
  exportWordImage(
    "../template.docx",
    startSchemeTemplate.value,
    htmlTitle.value,
    imgSize.value
  );
};

const goPreview = () => {
  dialogVisible.value = true;
};

const file = ref(null);
const handleOpened = () => {
  startSchemeTemplate.value.tableData = tableData.value
  getWordImage(
    "../template.docx",
    startSchemeTemplate.value,
    imgSize.value,
    file.value
  );
};
</script>

<template>
  <div style="height: 90%; background: #fff; padding: 24px">
    <div style="margin-bottom: 17px; text-align: left">
      <el-button type="primary" @click="downLoad"> 下载启动方案 </el-button>
      <el-button type="primary" @click="goPreview"> 预览启动方案 </el-button>
    </div>
    <el-divider />
    <div style="margin-top: 24px">
      <!--搜索区域-->
      <el-form :model="startSchemeTemplate" label-width="110px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="启动方案名称：">
              <el-input
                v-model="startSchemeTemplate.name"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预定启动时间：">
              <el-date-picker
                v-model="startSchemeTemplate.time"
                type="date"
                placeholder="请选择"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="height: 280px">
          <el-col :span="12">
            <el-form-item label="启动范围：">
              <el-input
                v-model="startSchemeTemplate.scope"
                placeholder="请输入"
                type="textarea"
                :autosize="{ minRows: 13.5, maxRows: 14 }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调试项目：">
              <el-input
                v-model="startSchemeTemplate.projectAdjuster"
                placeholder="请输入"
                type="textarea"
                :autosize="{ minRows: 13.5, maxRows: 14 }"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="height: 280px">
          <el-col :span="12">
            <el-form-item label="启动条件：">
              <el-input
                v-model="startSchemeTemplate.condition"
                placeholder="请输入"
                type="textarea"
                :autosize="{ minRows: 13.5, maxRows: 14 }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调试步骤：">
              <el-input
                v-model="startSchemeTemplate.stepAdjuster"
                placeholder="请输入"
                type="textarea"
                :autosize="{ minRows: 13.5, maxRows: 14 }"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    @opened="handleOpened"
    title="流程图"
    width="1200px"
    top="5vh"
  >
    <div class="docWrap">
      <div ref="file"></div>
    </div>
  </el-dialog>
</template>

<style scoped>
.btn {
  float: left;
  margin: 0 0 24px;
}
.docWrap {
  height: 700px;
  overflow: auto;
  clear: both;
}
</style>
